﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>栏目类别管理</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/icon/iconfont.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="iconfont icon-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                <el-breadcrumb-item>栏目类别</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="toolbar-box">
            <div class="list-box">
                <div class="l-list">
                    <el-button-group>
                        <el-button icon="el-icon-plus" @@click="linkUrl('/Article/CategoryEdit')">新增</el-button>
                        <el-button icon="el-icon-delete" @@click="deleteCheckAll">删除</el-button>
                    </el-button-group>
                </div>
                <div class="r-list">
                    <div class="search-box">
                        <el-input placeholder="输入关健字" v-model="keyword">
                            <el-button slot="append" icon="el-icon-search" @@click="initData"></el-button>
                        </el-input>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-box">
            <el-card class="table-card">
                <el-table ref="multipleTable" v-loading="loading" 
                          :data="listData" 
                          stripe 
                          class="table-list" 
                          row-key="id"
                          default-expand-all 
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                          @@selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="45"></el-table-column>
                    <el-table-column prop="title" label="标题" min-width="180"></el-table-column>
                    <el-table-column prop="callIndex" label="调用名称" min-width="120"></el-table-column>
                    <el-table-column prop="status" label="状态" width="160" align="center">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="success" v-if="scope.row.status==0">启用</el-tag>
                            <el-tag size="small" effect="dark" type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addTime" label="添加时间" width="160"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="130">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" @@click="linkUrl('/Article/CategoryEdit?id='+scope.row.id)"></el-button>
                            <el-button size="mini" icon="el-icon-plus" @@click="linkUrl('/Article/CategoryEdit?parentId='+scope.row.id)"></el-button>
                            <el-button size="mini" type="danger" icon="el-icon-delete" @@click="deleteItem(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/js/axios.config.js"></script>

    <script>
        //初始化VUE
        var vm = new Vue({
            el: '#app',
            data: {
                loading: false,
                keyword: '', //查询关健字
                showToolsBar: false, //显示更多条件选项
                checkAll: false, //是否已全选
                heightToolsBar: 'height:60px',
                iconToolsBar: 'iconfont icon-d-arrow-down',
                totalCount: 0,
                listData: [],
                channelId: 0,
                pageSize: 10000,
                pageIndex: 1,
            },
            methods: {
                //加载数据
                initData: function () {
                    let _this = this;
                    _this.channelId = GetQueryValue("channelId"); //获取channelId
                    let sendUrl = `/article/category/${_this.channelId}`;
                    if (_this.keyword.length > 0) {
                        sendUrl += "?keyword=" + encodeURI(_this.keyword);
                    }
                    AxiosAjax({
                        url: sendUrl,
                        beforeSend: function () {
                            _this.loading = true
                        },
                        success: function (res) {
                            _this.listData = res.data;
                        },
                        error: function (err) {
                            _this.listData = null;
                        },
                        complete: function () {
                            _this.loading = false
                        }
                    });
                },
                //跳转链接
                linkUrl: function (url) {
                    var _this = this;
                    if (url.indexOf('?') >= 0) {
                        url = url + '&channelId=' + _this.channelId;
                    } else {
                        url = url + '?channelId=' + _this.channelId;
                    }
                    window.location.href = url;
                },
                //多选删除
                deleteCheckAll: function () {
                    let _parent = this; //父页面
                    let _this = this; //当前页面
                    
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _parent = parent.vm;
                    }
                    //拿到选中的数据
                    let list = _this.multipleSelection;
                    //检查是否有选中
                    if (!list) {
                        _this.$message({ type: 'warning', message: '请选择要删除的记录！' });
                        return false;
                    }
                    console.log(list);
                    //执行删除操作
                    _parent.$confirm('确认要删除该记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        let delIds = [];//创建一个数组
                        list.forEach((item, index) => {
                            //遍历源数据
                            _this.listData.forEach((v, i) => {
                                if (item.id == v.id) {
                                    delIds.push(item.id);
                                }
                            })
                        });
                        console.log(delIds.toString());
                        let url = `/article/category/${_this.channelId}?ids=` + delIds.toString();
                        AxiosAjax({
                            method: 'delete',
                            url: url,
                            loading: true,
                            successMsg: '已删除成功',
                            success: function (res) {
                                _this.initData(); //重新加载列表
                                //清除选中状态
                                _this.$refs.multipleTable.clearSelection();
                            }
                        })
                    })
                },
                //多选删除
                //deleteCheckAll: function () {
                //    let _parent = this; //父页面
                //    let _this = this; //当前页面
                //    //判断是否有父窗体
                //    if (typeof (parent.vm) != "undefined") {
                //        _parent = parent.vm;
                //    }
                //    //拿到选中的数据
                //    let list = _this.multipleSelection;
                //    //检查是否有选中
                //    if (list.length == 0) {
                //        _this.$message({ type: 'warning', message: '请选择要删除的记录！' });
                //        return false;
                //    }
                //    //执行删除操作
                //    _parent.$confirm('确认要删除该记录吗？', '提示', {
                //        confirmButtonText: '确定',
                //        cancelButtonText: '取消',
                //        type: 'warning'
                //    }).then(function () {
                //        AxiosAjax({
                //            method: 'delete',
                //            url: `/article/category/${_this.channelId}?ids=` + list.toString(),
                //            loading: true,
                //            successMsg: '已删除成功',
                //            success: function (res) {
                //                _this.initData(); //重新加载列表
                //            }
                //        })
                //    }).catch(function () { });
                //},
                //单项删除
                deleteItem: function (val) {
                    let _parent = this; //父页面
                    let _this = this; //当前页面
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _parent = parent.vm;
                    }
                    //执行删除操作
                    _parent.$confirm('确认要删除该记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        let url = `/article/category/${_this.channelId}/${val}`
                        AxiosAjax({
                            method: 'delete',
                            url: url,
                            loading: true,
                            successMsg: '已删除成功',
                            success: function (res) {
                                _this.initData(); //重新加载列表
                            }
                        });

                    });
                },
                //选中第几行
                handleSelectionChange: function (val) {
                    console.log(val);
                    this.multipleSelection = val;
                },
            },
            created: function () {
                let _this = this; //当前页面
                //加载频道列表
                _this.initData();
            }
        })
    </script>
</body>
</html>